<template>
  <div class="w-[380px]">
    <a-card class="h-full">
      <a-spin :spinning="loading" class="flex-1 overflow-auto">
        <a-directory-tree
          v-if="treeData.length"
          v-model:selected-keys="selectedKeys"
          default-expand-all
          :tree-data="treeData"
          class="flex-1 overflow-hidden overflow-x-auto mt-2"
          :field-names="{
            children: 'subList',
            title: 'code'
          }"
        >
          <template #icon="{ parentCode, nodeType }">
            <!-- nodeType 节点类型 0:模板内容 1:模板分类 -->
            <FunnelPlotOutlined v-if="parentCode === '0'" />
            <template v-else>
              <img v-if="nodeType === 0" :src="IconDocument" width="14" class="pb-1" />
              <img v-else :src="IconDirectory" width="14" class="pb-1" />
            </template>
          </template>
          <template #title="item">
            <div class="inline-flex justify-between items-center w-full" @click="onSelectTemplate(item)">
              <div class="mr-2 truncate w-40" :title="item.name">{{ item.name }}</div>
              <div class="flex items-center">
                <a-space>
                  <!-- 编辑 -->
                  <a-button v-if="item.parentCode !== '0'" type="text" :icon="h(FormOutlined)" size="small" @click.stop="onAddDirectory(item)" />
                  <!-- 删除 -->
                  <BaseButton
                    v-if="item.parentCode !== '0'"
                    size="small"
                    type="text"
                    danger
                    :icon="h(CloseOutlined)"
                    confirm-text="确定删除该目录?"
                    @click="onDeleteDrectory(item)"
                  />
                  <!-- 添加 -->
                  <a-button v-if="item.nodeType === 1" type="text" :icon="h(PlusOutlined)" size="small" @click.stop="onAddDirectory(item, true)" />
                </a-space>
              </div>
            </div>
          </template>
        </a-directory-tree>
        <a-empty v-else class="w-full h-full" />
        <AddDirectory v-model:open="openDirectory" :row-data="rowData" @success="getData(formState)" />
      </a-spin>
    </a-card>
  </div>
</template>
<script setup>
import { h } from 'vue'
import { message } from 'ant-design-vue'
import { FormOutlined, PlusOutlined, CloseOutlined, FunnelPlotOutlined } from '@ant-design/icons-vue'
import IconDocument from '@/assets/icons/icon-document.svg'
import IconDirectory from '@/assets/icons/icon-directory.svg'
import AddDirectory from './AddDirectory.vue'

const emit = defineEmits(['select'])
const loading = ref(false)
const treeData = ref([])
const openDirectory = ref(false)
const rowData = ref({})
const fisrstNode = ref({})
const formState = ref({})

const getData = async (val) => {
  formState.value = val
  const { data, code } = await post('/ris/template/getTemplateCategoryList', val)
  if (code === 0) {
    treeData.value = data || []
    fisrstNode.value = data?.[0] || {}
  }
}
const onAddDirectory = (item, flag) => {
  if (flag) {
    //添加
    rowData.value = {
      ...item,
      firstNodeCode: fisrstNode.value.code,
      firstNodeName: fisrstNode.value.name,
      categoryCode: formState.value.categoryCode,
      isAdd: true
    }
  } else {
    //编辑
    rowData.value = { ...item, firstNodeCode: fisrstNode.value.code, firstNodeName: fisrstNode.value.name, categoryCode: formState.value.categoryCode }
  }
  openDirectory.value = true
}
const onSelectTemplate = (item) => {
  emit('select', item)
}
const onDeleteDrectory = async (item) => {
  if (item.nodeType === 0) {
    //模板
    const { code, msg } = await post('/ris/template/doDeleteTemplateContent', { data: item.code })
    if (code !== 0) return message.error(msg)
    message.success(msg || '操作成功')
  } else {
    //模板分类
    const { code, msg } = await post('/ris/template/doDeleteTemplateCategory', { data: item.code })
    if (code !== 0) return message.error(msg)
    message.success(msg || '操作成功')
  }
  getData(formState.value)
}
defineExpose({
  getData
})
</script>
<style lang="less" scoped>
.icon-color {
  color: var(--primary-color);
}
:deep(.ant-spin-container) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
:deep(.ant-tree) {
  .ant-tree-list {
    height: 100%;
    overflow: auto;
  }
  .ant-tree-switcher {
    width: 16px !important;
  }
}
:deep(.ant-tree-indent-unit) {
  width: 16px !important;
}
:deep(.ant-tree-treenode) {
  display: flex;
  width: 100%;
  padding: 8px 0;
  button:not(.ant-btn-dangerous) {
    color: var(--primary-color);
  }
  .ant-tree-node-selected {
    button:not(.ant-btn-dangerous) {
      color: #fff;
    }
  }
  &:before {
    bottom: 0 !important;
  }
  .ant-tree-node-content-wrapper {
    display: flex;
    align-items: center;
    .ant-tree-title {
      flex: 1;
    }
  }
}
</style>
